<template>
	<s-table ref="table" :columns="columns" :data="loadDataC" :alert="false" bordered :row-key="(record) => record.id">
		<template #bodyCell="{ column, record }">
			<template v-if="column.dataIndex === 'avatar'">
				<a-avatar :src="record.avatar" style="width: 25px; height: 25px"/>
			</template>
			<template v-if="column.dataIndex === 'tokenNumber'">
				{{ record.tokenSignList.length }}
			</template>
			<template v-if="column.dataIndex === 'action'">
				<a @click="tokenInfoList.onOpen(record.tokenSignList)">令牌列表</a>
				<a-divider type="vertical"/>
				<a-space>
					<a-popconfirm title="确定要强退此用户吗？" @confirm="bExit(record)">
						<a-button type="link" danger size="small">强退</a-button>
					</a-popconfirm>
				</a-space>
			</template>
		</template>
	</s-table>
	<token-info-list ref="tokenInfoList" @successful="table.refresh()"/>
</template>

<script setup name="monitorCTab">
import monitorApi from '@/api/auth/monitorApi'
import TokenInfoList from './tokenInfoList.vue'

const table = ref(null)
const tokenInfoList = ref()
const columns = [
	{
		title: '头像',
		dataIndex: 'avatar',
		width: 60
	},
	{
		title: '账号',
		dataIndex: 'account'
	},
	{
		title: '姓名',
		dataIndex: 'name',
		ellipsis: true
	},
	{
		title: '登录地点',
		dataIndex: 'latestLoginAddress',
		ellipsis: true
	},
	{
		title: '最后登录时间',
		dataIndex: 'lastLoginTime',
		ellipsis: true
	},
	{
		title: '登录IP',
		dataIndex: 'latestLoginIp',
		width: 120,
		ellipsis: true
	},
	{
		title: '令牌数',
		dataIndex: 'tokenNumber',
		width: 70
	},
	{
		title: '操作',
		dataIndex: 'action',
		width: '150px',
		scopedSlots: {customRender: 'action'}
	}
]
// 列表数据
const loadDataC = (parameter) => {
	return monitorApi.monitorCPage(parameter).then((res) => {
		return res
	})
}
// 强退B端session
const bExit = (record) => {
	let params = [
		{
			userId: record.id
		}
	]
	monitorApi.monitorCExit(params).then(() => {
		table.value.refresh(true)
	})
}
</script>

<style scoped>
.table-wrapper {
	margin-top: -16px !important;
}
</style>
